<template>
	<view class="content">
		<!-- 背景一 -->
		<view class="bg"></view>
		<!-- 背景二 -->
		<view class="bg2"></view>
		<!-- 登录提示 -->
		<view class="tips">
			<text class="title">登录</text>
			<text class="subtitle">欢迎再次回来~</text>
		</view>
		<!-- 登录view -->
		<view class="form-box">
			<!-- 账号登录和验证码登录 -->
			<view class="tab-box">
				<view class="title" :class="tabsIndex==0?'tabs-selected':'tabs-no-selected'" @click="tabsClick(0)">账号登录
				</view>
				<view class="title" :class="tabsIndex==1?'tabs-selected':'tabs-no-selected'" @click="tabsClick(1)">手机登录
				</view>
			</view>
			<!-- 登录方式 -->
			<view class="input-box">
				<image class="left" src="/static/login/shouji.png">
				</image>
				<input maxlength="11" v-model="user.phone" placeholder="请输入账号" />
				<image class="right" src="">
				</image>
			</view>
			<view class="input-box">
				<image class="left" src="/static/login/mima.png">
				</image>
				<input maxlength="16" v-model="user.password" :password="tabsIndex==1?false:true"
					:placeholder="tabsIndex==1?'请输入验证码':'请输入密码'" />
				<!-- 验证码登录按钮 -->
				<view v-if="tabsIndex==1" @click="sendRegCode" class="code">
					{{getCode=="1"?'获取验证码': getCode==2?"获取验证码":changeCode+'s后可重发' }}
				</view>
				<image class="right" src="">
				</image>
			</view>
			<view class="btn" @click="login">登录</view>
			<view class="other">
				<text>找回密码</text>
				<text style="color:#00c6fc;" @click="getRegister">快速注册</text>
			</view>
		</view>
		<!-- 登录协议 -->
		<view class="t-f">登录即同意<text>用户协议</text></view>
		<!-- 第三方登录 -->
		<view class="t-e cl">
			<view class="t-g">
				<image @click="wxLogin" src="/static/login/weixin-copy.png"></image>
				<view>微信</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入api文件
	import api from "../../../api/api.js";
	// 导入pinia
	import {
		useUserStore
	} from "../../../store/users.js";
	const userStore = useUserStore();
	export default {
		data() {
			return {
				// 当前可用高度
				wh: 0,
				tabsIndex: 0,
				// 用户对象
				user: {
					phone: "",
					password: "",
				},
				getCode: "1", // 控制文字显示隐藏
				changeCode: 60, // 倒计时时间
				changeCodeFlag: false, // 节流值
			}
		},
		onLoad() {
			// 设置登录页面title
			uni.setNavigationBarTitle({
				title: "登录-悟空商城"
			})
			// 获取当前可用高度
			const sysInfo = uni.getSystemInfoSync();
			this.wh = sysInfo.windowHeight;
		},
		methods: {
			// 切换登录方式
			tabsClick(index) {
				this.tabsIndex = index
			},
			// 点击跳转注册页面
			getRegister() {
				uni.navigateTo({
					url: "/pages/user/sign_up/sign_up",
				})
			},
			// 倒计时函数
			countTime() {
				if (this.changeCodeFlag) return // 默认值false 第一次不return
				// 调用api
				this.apiLogCode();
				// 改为true 计时不结束一直return
				this.changeCodeFlag = true;
				this.getCode = "3";
				// 定义定时器 方便清除
				let timer = setInterval(() => {
					// 倒计时数字 每秒自减1 
					this.changeCode--;
					// 每次自减一 再赋值给它本身
					this.changeCode = this.changeCode;
					// 判断 显示为0s时 结束定时器 将'重新获取'显示出来 将节流值改为false 将倒计时复原
					if (this.changeCode === -1) {
						clearInterval(timer);
						this.getCode = "2";
						this.changeCode = 60;
						this.changeCodeFlag = false;
					}
				}, 1000);
			},

			// 发验证码
			apiLogCode() {
				// 发送注册验证码
				api.getLogCode(this.user.phone).then(res => {
					// 发送失败
					if (res.data.status != 200) return uni.$showMsg(res.data.data.err);
					// 发送成功
					uni.$showMsg(res.data.msg);
				})
			},

			// 发送登录验证码
			sendRegCode() {
				// 启动按钮倒计时
				this.countTime();
			},
			// 登录用户
			login() {
				if (this.tabsIndex == 0) {
					api.zhLogin(this.user).then(res => {
						// 登录失败
						if (res.data.status != 200) return uni.$showMsg(res.data.data.err);
						// 登录成功
						uni.$showMsg(res.data.msg);
						// 保存token
						userStore.setToken(res.data.data.user[0].token);
						// 1.8秒跳转我的页面
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/my/my",
							});
						}, 1800);
					});
				} else if (this.tabsIndex == 1) {
					api.codeLogin(this.user).then(res => {
						// 登录失败
						if (res.data.status != 200) return uni.$showMsg(res.data.data.err);
						// 登录成功
						uni.$showMsg(res.data.msg);
						// 保存token
						userStore.setToken(res.data.data.user[0].token);
						// 1.8秒跳转我的页面
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/my/my",
							});
						}, 1800);
					})
				}
			},
			// 微信登录
			wxLogin() {
				const type = uni.getSystemInfoSync().uniPlatform
				// 判断当前使用设备
				if (type == "web") {
					uni.$showMsg("浏览器不支持微信登录，请在app操作！");
				}

			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background-color: white;

		// 登录提示
		.tips {
			padding-top: 200rpx;
			padding-left: 80rpx;
			display: flex;
			flex-direction: column;

			.title {
				line-height: 70rpx;
				font-weight: bold;
				font-size: 50rpx;
			}

			.subtitle {
				line-height: 70rpx;
				font-size: 35rpx;
				font-weight: bold;
				color: #b0b0b1;
			}

		}

		// 背景一
		.bg {
			position: fixed;
			top: -250rpx;
			right: -250rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: #00baef;
			z-index: 2
		}

		// 背景二
		.bg2 {
			position: fixed;
			top: -150rpx;
			right: -300rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: #ade8f9;
			z-index: 1;
		}

		// 登录view 
		.form-box {
			padding-top: 180rpx;
			padding-left: 70rpx;
			width: 610rpx;

			// 账号登录和验证码登录
			.tab-box {
				margin-left: 15rpx;
				display: flex;
				align-items: flex-end;

				.title {
					margin-right: 50rpx;
					// height: 55rpx;
				}

				.tabs-no-selected {
					font-size: 32rpx;
				}

				.tabs-selected {
					font-size: 35rpx;
					font-weight: bold;
					border-bottom: 6rpx solid #fe8d85;
				}
			}

			.input-box {
				margin: 40rpx 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 100rpx;
				background-color: #f5f5f5;
				border-radius: 100rpx;
				width: 100%;

				input {
					flex: 1;
					height: 100%;
					font-size: 13px;
				}

				.left {
					padding: 0 30rpx;
					width: 45rpx;
					height: 45rpx;
				}

				.right {
					padding: 0 30rpx;
					width: 40rpx;
					height: 40rpx;
				}

				// 验证码登录按钮
				.code {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fe8d85;
					font-size: 26rpx;
				}
			}

			// 登录按钮
			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100rpx;
				border-radius: 100rpx;
				color: #FFFFFF;
				background: linear-gradient(to right, #00c6fc, #9adcf1);
			}

			// 找回密码
			.other {
				display: flex;
				justify-content: space-between;

				text {
					line-height: 80rpx;
					font-size: 28rpx;
				}
			}
		}

		// 登录协议
		.t-f {
			text-align: center;
			margin: 80rpx 0 0 0;
			color: #666;
			font-size: 14px;

			text {
				margin-left: 8rpx;
				color: #999
			}
		}

		// 第三方登录
		.t-e {
			text-align: center;
			width: 250rpx;
			margin: 40rpx auto 0;

			// 图标
			image {
				width: 70rpx;
				height: 70rpx
			}

			view {
				font-size: 12px;
			}
		}

		.cl {
			zoom: 1;
		}

		.cl:after {
			clear: both;
			display: block;
			visibility: hidden;
			height: 0;
			content: '\20'
		}
	}
</style>